<#import "../tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="店铺信息">
<style>
    .button-large {
        font-size: 16px;
    }

    hr {
        border-color: #009688;
    }

    .control-group {
        margin-left: -37px;
    }

    .webuploader-pick {
        padding: 3px 2px;
    }

    .pull-right {
        margin-right: 30px;
    }
</style>
<div class="xm-offline">
    <div class="row">
        <div class="panel">
            <div class="returnBtn panel-header">
                <a href="${basepath}/rest/manage/store/toList">返回上一级</a>
            </div>
        </div>
        <div class="panel">
            <div class="panel-body">
                <form id="editForm" class="form-horizontal" action="${basepath}/rest/manage/store/updateJson"
                      method="post">
                    <input type="hidden" class="control-text span-width span10" name="id" value="${e.id!}">

                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            店铺标题：
                        </label>

                        <div class="controls">
                            <input type="text" data-rules="{required:true}" class="control-text span-width span10"
                                   style="width:300px" name="storeName" value="${e.storeName!}" placeholder="请输入标题">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            店铺介绍：
                        </label>

                        <div class="controls control-row12" style="height: 225px;initialFrameWidth: 100%;">
                            <textarea type="text" data-rules="{required:true}" class="input-large" name="introduce"
                                      id="content" style="height: 200px" placeholder="请输入内容">${e.introduce!}</textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            状态：
                        </label>

                        <div class="controls">
                            <select data-rules="{required:true}" name="status" value="${e.status!}">
                                <option value="y">启用</option>
                                <option value="n">禁用</option>
                            </select>
                        </div>
                    </div>
                    <h3 class="offset2">店铺头像
                        <a class="pull-right" id="imageBtn">上传图片</a>
                    </h3>
                    <hr>
                    <input type="hidden" class="control-text span-width " name="storeIcon" id="storeIcon"
                           value="${e.storeIcon!}">

                    <div id="iconGrid" class="xm-grid"></div>

                    <h3 class="offset2">店铺封面
                        <a class="pull-right" id="imagesBtn">上传图片</a>
                    </h3>
                    <hr>
                    <input type="hidden" class="control-text span-width " name="flag" id="flag"
                           value="${e.flag!}">

                    <div id="flagGrid" class="xm-grid"></div>

                    <div class="centered">
                        <button type="submit" class="button  button-large  button-success">保存</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
<#------------------------------------------编辑弹出框-------------------------------------------------->
    <div id="uploader" class="wu-example" style="display:none">
        <div class="btns">
            <div id="picker">选择图片</div>
        </div>
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
    </div>
</div>
<script>
    var Grid = BUI.Grid;
    var Store = BUI.Data.Store;
    var iconStore = new Store({});
    var flagStore = new Store({});
    var idType = ''; //用来判断图片上传成功后对应更新店铺头像还是店铺封面数据源
    var editForm = new BUI.Form.Form({
        srcNode: '#editForm',
        submitType: 'ajax',
        callback: function (data) {
            if (data.success == true) {
                window.location.href = "${basepath}/rest/manage/store/toStoreDetail"
            } else {
            }
        }
    }).render();
    /**
     * 初始化图片列表数据源
     */
    function initStore() {
        if ('${e.storeIcon!}' != null && '${e.storeIcon!}' != '') {
            var obj1 = {url: '${e.storeIcon!}', state: 'success', id: '1'};
            iconStore.add(obj1);
        }
        if ('${e.flag!}' != null && '${e.flag!}' != '') {
            var obj2 = {url: '${e.flag!}', state: 'success', id: '2'};
            flagStore.add(obj2);
        }
    }
    initStore();
    /**
     * 店铺头像表格渲染
     */
    var iconColumns = [
        {
            title: '图片', dataIndex: 'url', width: '30%', renderer: function (data) {
            return '<img src="/' + data + '" style="height:100px;width:100px"/>'
        }
        },
        {
            title: '状态', dataIndex: 'state', width: '30%', renderer: function (data) {
            if (data == "success") {
                return "上传成功";
            }
            return "上传失败";
        }
        },
        {
            title: '操作', dataIndex: '', width: '40%', renderer: function () {
            return '<a href="javascript:editImages(1)">编辑</a>';
        }
        }
    ];
    var iconGrid = new Grid.Grid({
        render: '#iconGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: iconColumns,
        idField: 'title',
        store: iconStore
    });
    iconGrid.render();
    /**
     * 店铺封面表格渲染
     */
    var flagColumns = [
        {
            title: '图片', dataIndex: 'url', width: '30%', renderer: function (data) {
            return '<img src="/' + data + '" style="height:100px;width:100px"/>'
        }
        },
        {
            title: '状态', dataIndex: 'state', width: '30%', renderer: function (data) {
            if (data == "success") {
                return "上传成功";
            }
            return "上传失败";
        }
        },
        {
            title: '操作', dataIndex: '', width: '40%', renderer: function () {
            return '<a href="javascript:editImages(2)">编辑</a>';
        }
        }
    ];
    var flagGrid = new Grid.Grid({
        render: '#flagGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: flagColumns,
        idField: 'title',
        store: flagStore
    });
    flagGrid.render();
    /**
     * 编辑图片上传弹出框
     */
    var editDialog = new BUI.Overlay.Dialog({
        title: '图片上传',
        width: 400,
        height: 200,
        contentId: 'uploader',  //弹出框显示内容的DOM容器ID
        success: function () {   //每次点击弹出框的确定时执行上传文件
            uploader.upload();
        }
    });
    function editImages(id) {//点击添加时弹出框显示
        idType = id;
        $("#thelist").empty(); //每次点击添加时清除$("#thelist")元素的子元素
        editDialog.show();
        $(".webuploader-pick").next().css({"width": "107px", "height": "40px"});           //更改样式防止找不到按钮
    }
    /*-------------------------配置弹出框里面的文件上传---------------------------*/
    var uploader = WebUploader.create({
        auto: false,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#picker',
        resize: false,
        duplicate: true,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    uploader.on('fileQueued', function (file) {
        $("#thelist").empty();//每次有文件进来先清理之前提示信息
        var fileType = file.name.substr(file.name.lastIndexOf("."));
        if (fileType == '.gif' || fileType == '.jpg' || fileType == '.jpeg' || fileType == '.bmp' || fileType == '.png') {
            $("#thelist").append('<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>');
        }
        else {
            BUI.Message.Alert('请选择支持格式类型图片！', 'error');
        }
    });
    uploader.on('uploadSuccess', function (file, response) {
        $('#' + file.id).find('p.state').text('已上传');
        if (idType == '1') {
            $('#storeIcon').val(response.url);
            var obj1 = iconStore.find('id', '1');
            obj1.url = response.url;
            obj1.state = 'success';
            iconStore.update(obj1);
        }
        if (idType == '2') {
            $('#flag').val(response.url);
            var obj2 = flagStore.find('id', '2');
            obj2.url = response.url;
            obj2.state = 'success';
            flagStore.update(obj2);
        }
        editDialog.close();
    });
    /*--------------------------------店铺头像图片上传配置----------------------------------*/
    var uploader2 = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#imageBtn',
        resize: false,
        duplicate: true,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    uploader2.on('uploadSuccess', function (file, response) {
        uploader2.removeFile(file);
        $('#storeIcon').val(response.url);
        var obj = iconStore.find('id', '1');
        if (obj == null) {
            obj = {id: '1', url: response.url, state: 'success'};
            iconStore.add(obj);
        } else {
            obj.url = response.url;
            obj.state = 'success';
            iconStore.update(obj);
        }
    });
    /*--------------------------------店铺封面图片上传配置----------------------------------*/
    var uploader1 = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',
        resize: false,
        duplicate: true,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    uploader1.on('uploadSuccess', function (file, response) {
        uploader1.removeFile(file);
        $('#flag').val(response.url);
        var obj = flagStore.find('id', '2');
        if (obj == null) {
            obj = {id: '2', url: response.url, state: 'success'};
            flagStore.add(obj);
        } else {
            obj.url = response.url;
            obj.state = 'success';
            flagStore.update(obj);
        }
    });
</script>
</@page.pageBase>